<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载-简单</title>
    <style>
      ul,li {
          list-style: none;
      }
      .container {
          width: 600px;
          margin: 0 auto;
      }
      .container li {
          float: left;
          margin: 10px 10px;
      }
      .container li img {
          width: 240px;
          height: 180px;
      }
    </style>
    <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    /*
      对于所有的 img 标签，把真实的地址放入自定义属性data-img
    */

      $(function(){
        // 用户第一次打开页面，还未滚动窗口的时候需要执行一次 checkShow
          lazyRender()
          var clock
        //   var $img = $('img')
          $(window).on('scroll', function(){
              // 函数防抖
              if(clock) {
                  clearTimeout(clock)
              }
              clock = setTimeout(function(){
                //   console.log('hello')
                  lazyRender()
              },100)
          })

          function lazyRender() {
            // 当滚动页面时，检查页面所有的 img 标签，
            //看看这个标签是否出现到我们的视野，
            //当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它
              $('.container img').each(function(){
                  if(checkShow($(this)) && !isLoaded($(this)) ){
                      loadImg($(this))
                  }
              })
          }

          function checkShow($img) { //检查img是否出现在我们的视野中
              var scrollTop = $(window).scrollTop()
              var windowHeight = $(window).height()
              var offsetTop = $img.offset().top
              if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
                  return true
              } else {
                 return false  
              }

          }

          function isLoaded($img) { //判断是否加载
              return $img.attr('data-src') === $img.attr('src')
          }

          function loadImg($img) {
              $img.attr('src', $img.attr('data-src'))
          }
      })
    </script>
</head>
<body>
    <ul class="container">
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" /></a></li>
        <li><a href="#"><img id=a src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" /></a></li>
        <li><a href="#"><img id=b src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" /></a></li>
        <li><a href="#"><img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" /></a></li>

    </ul>
</body>
</html>